<ui:composition template="/WEB-INF/templates/main-template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">


	<ui:define name="sidebar">
		<ui:include src="/WEB-INF/templates/public-sidebar.xhtml" />
	</ui:define>
	<ui:define name="content">

		<h:form enctype="multipart/form-data" id="uploaderForm">
			<p:growl id="messages" showDetail="true" />
			<h:outputText value="Upload Employee Images"
				styleClass="outputTextTitle" />

			<h:panelGrid columns="5" style="margin: 0 auto; width: 100%;">
				<h:panelGroup>
					<h:outputText value="#{msg['module.lable']}" />
					<br />
					<p:selectOneMenu id="modulesMenu"
						value="#{uploadEmployeeImagesBean.selectedModule}"
						styleClass="selectOneMenu168pxFixedWidth">
						<f:selectItem itemLabel="" itemValue="" />
						<f:selectItems value="#{uploadEmployeeImagesBean.modulesMap}" />
					</p:selectOneMenu>
					<p:watermark for="modulesMenu" value="Select Module" />
				</h:panelGroup>

				<h:panelGroup>
					<h:outputText value="#{msg['location.label']}" />
					<br />
					<p:inputText id="location" value="#{uploadEmployeeImagesBean.location}" />
					<p:watermark for="location" value="Enter Location" />
				</h:panelGroup>

				<h:panelGroup>
					<h:outputText value="Employee Code" />
					<br />
					<p:inputText id="employeeCode"
						value="#{uploadEmployeeImagesBean.employeeCode}" />
					<p:watermark for="employeeCode" value="Enter Employee Code" />
				</h:panelGroup>

				<h:panelGroup>
					<h:outputLabel value="#{msg['employeename.label']}" />
					<br />
					<p:inputText id="employeeName"
						value="#{uploadEmployeeImagesBean.employeeName}" />
					<p:watermark for="employeeName" value="Enter Employee Name" />
				</h:panelGroup>

				<h:panelGroup>
					<br />
					<p:commandButton value="Search"
						action="#{uploadEmployeeImagesBean.searchEmployees}" update="@form" />
				</h:panelGroup>
			</h:panelGrid>
			<p:dataTable value="#{uploadEmployeeImagesBean.employees}"
				id="employeeTable" paginator="true" rows="10" var="employee">
				<p:column style="vertical-align: top;">
					<h:outputText value="#{employee.firstName} #{employee.lastName}"
						style="font-size: 1.3em; font-weight: bold; color: #777777;" />
					<br />
					<h:outputText
						value="#{employee.designation} (#{employee.moduleName})" />
					<br />
					<h:outputText value="#{employee.employeeCode}" />

				</p:column>
				<p:column style="text-align: center;; width: 100px;">
					<p:commandLink oncomplete="dialog.show();" update="@form"
						action="#{uploadEmployeeImagesBean.showUploaderAction}">
						<f:setPropertyActionListener
							target="#{uploadEmployeeImagesBean.selectedEmployee}"
							value="#{employee}" />
						<p:graphicImage value="/EmployeeImages/#{employee.photo}" cache="false"  
							style="max-width: 100px; border: 1px solid #d9d9d9; height: 100px; -moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;" alt="Upload Photo" />
					</p:commandLink>
				</p:column>

			</p:dataTable>



			<p:dialog widgetVar="dialog" modal="true">
				<p:ajax event="close"
					listener="#{uploadEmployeeImagesBean.closeDialog}" />
				<h:panelGrid columns="1" color="blue" style="" id="uploaderPanel"
					rendered="#{uploadEmployeeImagesBean.RENDERUPLOADER}">
					<h:outputLabel
						value="Uplaod photo for #{uploadEmployeeImagesBean.selectedEmployee.firstName}:" />
					<p:fileUpload
						fileUploadListener="#{uploadEmployeeImagesBean.uploadHandler}"
						mode="advanced" update="@form"
						allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
						invalidFileMessage="Upload only jpeg/jpg/png/gif file."
						sizeLimit="1048576"
						invalidSizeMessage="Upload file must be &lt;= 1 MB." />
					<p:commandButton value="Close" title="Add New Resource"
						oncomplete="dialog.hide();" />
				</h:panelGrid>
			</p:dialog>
		</h:form>
	</ui:define>
</ui:composition>

